{extend name="base"}
{block name="resources"}
    <!--百度编辑器开始-->
    <script src="__STATIC__/Ueditor/ueditor.config.js" type="text/javascript" charset="utf-8"></script>
    <script src="__STATIC__/Ueditor/ueditor.all.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8" src="__STATIC__/Ueditor/lang/zh-cn/zh-cn.js"></script>
    <style type="text/css">    
    .img-box{
      position: relative;
    }
    .img-thumbnail{
      width:130px;
      height: 90px;      
    }
    .glyphicon{
      position: absolute;
      width: 16px;
      height: 16px;
      top:5px;
      right:5px;
      cursor: pointer;
    }
    table a{
      margin-right: 10px;
    }
  </style>
{/block}
{block name="body"}
<form class="form-horizontal" method="post" enctype="multipart/form-data">
  <div class="form-group">
    <label for="name" class="col-sm-1 control-label">商品名称</label>
    <div class="col-sm-6">
      <input type="text" class="form-control" id="name" name="name" placeholder="商品名称">
    </div>
  </div>
  <div class="form-group">
    <label for="category" class="col-sm-1 control-label">商品分类</label>
    <div class="col-xs-2">
      	<select class="form-control" id="select_category" name="cid_1">
          <option>选择分类</option>
          {foreach name="categoryList" id="cvals"}
          <option value="{$cvals.id}">{$cvals.cname}</option>
          {/foreach}
		    </select>
    </div>
    <div class="col-xs-2">
        <select class="form-control" name="cid_2" id="select_category_2">
          <option>选择子类</option>
        </select>
    </div>
    <div class="col-xs-2">
        <select class="form-control" name="cid_3" id="select_category_3">
          <option>选择子类</option>
        </select>
    </div>
  </div>
  <div class="form-group">
    <label for="brank" class="col-sm-1 control-label">商品品牌</label>
    <div class="col-sm-3">
      <select class="form-control" name="brank">
		  {foreach name="brandList" id="brand_val"}
        <option value="{$brand_val.id}">{$brand_val.name}</option>
      {/foreach}
		</select>
    </div>
  </div>
  <div class="form-group">
    <label for="price" class="col-sm-1 control-label">商品价格</label>
    <div class="col-sm-2">
      <input type="number" class="form-control" id="price" name="price" placeholder="商品价格" value="0">
    </div>
  </div>
  <div class="form-group">
    <label for="stock" class="col-sm-1 control-label">商品库存</label>
    <div class="col-sm-2">
      <input type="number" class="form-control" id="stock" name="stock" placeholder="商品库存" min="0" value="0">
    </div>
  </div>
  <div class="form-group">
    <label for="is_shelf" class="col-sm-1 control-label">是否上架</label>
    <div class="col-sm-3">
      <div class="checkbox">
        <label>
          <input type="checkbox" name="is_shelf" value="1" checked> 是
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <label for="goods_type" class="col-sm-1 control-label">商品类型</label>
    <div class="col-sm-3">
      <div class="radio">
        <label>
          <input type="radio" name="goods_type" id="goods_type1" value="0" checked>
          新品
        </label>
      </div>
      <div class="radio">
        <label>
          <input type="radio" name="goods_type" id="goods_type2" value="1">
          热卖
        </label>
      </div>
      <div class="radio">
        <label>
          <input type="radio" name="goods_type" id="goods_type3" value="2">
          促销
        </label>
      </div>
    </div>
  </div>  
  <div class="form-group">
    <label for="goods_type" class="col-sm-1 control-label">上传商品图</label>
    <div class="col-md-10">
      <button type="button" id="image-upload" onclick="imageUpload('insertimage')" class="btn btn-danger">选择商品相册</button>
      <div id="uploadEditor" name="imgnone" style="display: none;"></div>
      <div class="row imgThumbRow">        
      </div>
      <input type="text" name="thumblist" id="thumblist" style="display:none;">
      <input type="text" name="goodsthumb" id="goodsthumb" style="display:none;">
    </div>
  </div>
  <div class="form-group">
    <label for="goods_desc" class="col-sm-1 control-label">商品描述</label>
    <div class="col-sm-6">
  		<textarea class="form-control" rows="3" name="goods_desc"></textarea>
  	</div>
  </div>
  <div class="form-group">
    <label for="goods_info" class="col-sm-1 control-label">详细介绍</label>
    <div class="col-sm-11">  		
        <textarea name="goods_info" id="editor" style="width:90%; height:180px;"></textarea>
  	</div>
  </div>
  <div class="form-group">
    <label for="goods_info" class="col-sm-1 control-label">商品模型</label>
    <div class="col-sm-4">     
        <select class="form-control" name="spec">
          {foreach $typeList as $typeItem}
          <option value="{$typeItem.id}">{$typeItem.name}</option>
          {/foreach}
        </select>
    </div>
  </div>
  <div class="form-group" data-type="typeForSpec">
    <table class="table table-bordered">      
    </table>
  </div>
  <div class="form-group" id="ajax_spec_data" data-type="goods-Spec">
    
  </div>
  <div class="form-group">
    <div class="col-sm-offset-1 col-sm-11">
      <button type="submit" class="btn btn-default">提交</button>
    </div>
  </div>
</form>
<script>
  // 实例化编辑器，建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
  var ue = UE.getEditor('editor');
  //实例化隐藏域
  var uploadEditor = UE.getEditor("uploadEditor", {
        isShow: false,
        focus: false,
        enableAutoSave: false,
        autoSyncData: false,
        autoFloatEnabled:false,
        wordCount: false,
        sourceEditor: null,
        scaleEnabled:true,
        toolbars: [["insertimage", "attachment"]]
    });
  uploadEditor.ready(function () {
        // 监听插入图片
        uploadEditor.addListener("beforeInsertImage", _beforeInsertImage);
        // 监听插入附件
        // uploadEditor.addListener("afterUpfile",_afterUpfile);
    });
  function imageUpload(myevent) {
        var dialog = uploadEditor.getDialog(myevent);
        dialog.title = '上传';
        dialog.render();
        dialog.open();
  }
  function _beforeInsertImage(t,result) {
      var imageHtml = '';
      var imageBox = ''
      for(var i in result){          
          imageHtml += '<div class="col-xs-6 col-md-2 img-list-select"><img src="'+result[i].src+'" class="img-thumbnail" alt="点击将改图设为封面图"/></div>';
          imageBox +=result[i].alt+','+result[i].src+',';
      }
      $('.imgThumbRow').append(imageHtml);
      $('#thumblist').val(imageBox);
  }

  $("#select_category").change(function(){
    $("#select_category option").each(function(){
      if($(this).prop("selected")){
        var pid=this.value;
        $.get("{:url('getCateChild')}",{pid:pid},function(r){
          $("#select_category_2").html(r);
        });
      }
    });
  });
  $("#select_category_2").change(function(){
    var pid=this.value;
    $.get("{:url('getCateChild')}",{pid:pid},function(r){
      $("#select_category_3").html(r);
    });
  });  
  $('.imgThumbRow').on('click','.img-list-select',function(){
      $(this).siblings().removeAttr('data-img').find('.img-select-thumb').remove();
      if($(this).attr('data-img')){
        $(this).removeAttr('data-img').find(".img-select-thumb").remove();
      }else{
        $(this).attr('data-img',true).append("<i class='img-select-thumb'></i>");
        $('#goodsthumb').val($(this).find('img').attr('src'));
      }      
  });
  $('select[name=spec]').on('change',function(e){
    // var goods_id = '';
    var spec_type = $(this).val();
    $.ajax({
      type:"GET",
      data:{spec_type:spec_type},
      url:"{:url('ajaxGetSpecSelect')}",
      success:function(r){
        $("#ajax_spec_data").html(r);
      }
    });
    // var sid=this.value;
    // $.ajax({
    //   url: '{:url("ajaxGetSpecItem")}',
    //   type: 'POST',
    //   dataType: 'json',
    //   data: {'id':sid},
    // })
    // .done(function(r) {
    //   // form-group
    //   console.log(r);
    //   var html='';      
    //   $.each(r, function(index, val) {
    //     var chtml='';
    //     html+='<tr>';
    //     html+='<td data-id="'+val.id+'">'+val.name+'</td>';
    //     if(val.child){
    //       $.each(val.child,function(index, val){
    //         chtml+='<a href="javascript:" data-id="'+val.id+'" class="btn btn-default spec-item">'+val.item+'</button>';
    //       });
    //     }
    //     html+='<td>'+chtml+'</td>';
    //     html+='</tr>';
    //   });
    //   $('.form-group[data-type=typeForSpec] table').html('').append(html);
    // })
    // .fail(function() {
    //   console.log("error");
    // })
  });
  $('.form-group[data-type=typeForSpec] table').on('click','.spec-item',function(){
    var specid=$(this).attr('data-id');
    $(this).addClass('btn-danger');
  });
</script>
{/block}